<template>
	<view class="page">
		<uv-sticky bg-color="#fff">
			<uv-search v-model="searchText" show-action clearabled margin="20rpx" placeholder="搜索" action-text="取消"
				:animation="searchText ? false : true" @search="handleSearch" @clear="handleSearch"
				@custom="handleCancel" />
		</uv-sticky>
		<view class="device-item" v-for="(i, index) in filterDataList" :key="index" @click="toJump(taskId,i.deviceId)">
			<text>{{ i.deviceName || "无" }}： </text>
			<text>完成 {{ i.completedCountSum || 0 }}</text>
			<text> 剩余 {{ (i.totalSum || 0) - (i.completedCountSum || 0) }}</text>
			<view class="progress" :style="{ width: (i.completedCountSum / (i.totalSum || 1)) * 100 + '%' }" />
		</view>
	</view>
</template>
<script setup>
	import {
		ref
	} from "vue";
	import {
		onLoad
	} from "@dcloudio/uni-app";
	import {
		taskIncomplete
	} from "@/request/task.js";

	const searchText = ref(""); // 搜索框内容
	const taskId = ref(""); // 任务ID
	const dataList = ref([]); // 数据列表
	const filterDataList = ref([]); // 过滤后的数据

	onLoad((e) => {
		taskId.value = e.id;
		getList();
	});

	// 搜索数据
	const handleSearch = (value = "") => {
		filterDataList.value = dataList.value.filter((item) => {
			return item.deviceName.includes(value);
		});
	};

	// 取消搜索
	const handleCancel = () => {
		searchText.value = "";
		handleSearch();
	};

	// 获取设备列表
	const getList = () => {
		taskIncomplete(taskId.value).then((res) => {
			if (res.code == 200) {
				dataList.value = res.data;
				filterDataList.value = res.data;
			}
		});
	};
	const toJump = (e, deviceId) => {
		uni.navigateTo({
			url: `/pages/Task/searchSystem?subPlanId=${e}&deviceId=${deviceId}&from=1`
		})
	};
</script>
<style lang="scss" scoped>
	@import "@/uni.scss";

	.page {
		height: 100vh;
		background-color: #f9f9f9;
		box-sizing: border-box;
		padding-bottom: 20rpx;

		.device-item {
			font-size: 28rpx;
			border: 2rpx solid #dedede;
			background-color: #fff;
			padding: 20rpx;
			margin: 20rpx;
			border-radius: 8rpx;
			overflow: hidden;
			position: relative;

			text {
				position: inherit;
				z-index: 2;
				color: #757575;
			}

			.progress {
				position: absolute;
				top: 0;
				bottom: 0;
				left: 0;
				background-color: #9debb2;
				z-index: 1;
				transition: all 0.3s;
			}
		}
	}
</style>